import {CCard} from '@/components/card'
import {CnMediumP, CnMediumSpan, CnNormalP} from '@/components/text'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {PropType,reactive, toRefs, ref, defineComponent, watch, computed,onMounted} from 'vue'

const TaskBlock = defineComponent({
  props: {
    title: {
      type: String
    }
  },
  setup(props, {slots}) {
    return () => (
      <div class='mb-4'>
        {props.title ? <CnMediumP class='py-4 px-22 text-12'>{props.title}</CnMediumP> : null}
        <div>{slots.default?.()}</div>
      </div>
    )
  }
})

export const TaskContent = defineComponent({
  props: {
    dataSource: {
      type: Object as PropType<WorkTask.Task>,
      required: true
    }
  },
  setup(props, ctx) {
    const {store} = useGlobalAPI()
    const loginUserInfo = computed(() => store.getters['dingding/ddUserInfo'])
    return () => (
      <CCard title='' showTitle={false} class='border-0'>
        <div class='flex gap-x-16'>
          <img src={loginUserInfo.value.avatar} class='w-40 h-40 rounded-full'></img>
          <div class='flex-1'>
            <CnMediumSpan
              class='mb-4 text-16 text-xText'
              style={{
                whiteSpace: 'break-spaces'
              }}
            >
              {props.dataSource.workTaskContent}
            </CnMediumSpan>
          </div>
        </div>
      </CCard>
    )
  }
})
export default TaskBlock
